<%--
  Created by IntelliJ IDEA.
  User: 何鸿鹰
  Date: 2025/5/14
  Time: 22:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>个人地址管理</title>
    <!-- Bootstrap CSS -->
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .form-container {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
        }
        .address-table {
            margin-top: 30px;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="form-container">
        <h2 class="text-center mb-4">新增地址信息</h2>
        <% if (request.getAttribute("error") != null) { %>
        <div style="color: red">${error}</div>
        <% } %>
        <form action="${pageContext.request.contextPath}/address/save" method="post">
            <div class="form-group mb-3">
                <label for="phone">电话号码</label>
                <input type="tel" class="form-control" id="phone" name="phone" placeholder="请输入电话号码" required>
            </div>
            <div class="form-group mb-3">
                <label for="address">地址</label>
                <input type="text" class="form-control" id="address" name="address" placeholder="请输入详细地址" required>
            </div>
            <div class="text-center">
                <button type="submit" class="btn btn-primary">保存地址</button>
                <a href="javascript:history.back()" class="btn btn-secondary">返回</a>
            </div>
        </form>
    </div>

    <div class="address-table">
        <h3 class="text-center">我的地址列表</h3>
        <table class="table table-bordered table-striped">
            <thead class="table-dark">
            <tr>
                <th>电话号码</th>
                <th>地址</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:if test="${empty addresses}">
                <tr>
                    <td colspan="4" class="text-center">暂无地址信息</td>
                </tr>
            </c:if>
            <c:forEach items="${addresses}" var="addr">
                <tr>
                    <td>${addr.phone}</td>
                    <td>${addr.address}</td>
                    <td class="text-center">
                        <a href="javascript:void(0)"
                           class="btn btn-sm btn-warning me-2"
                           onclick="openEditModal(${addr.id}, '${addr.phone}', '${addr.address}')">
                            编辑
                        </a>
                        <form action="${pageContext.request.contextPath}/address/delete/${addr.id}"
                              method="post"
                              style="display: inline;"
                              onsubmit="return confirm('确定要删除该地址吗？')">
                            <button type="submit" class="btn btn-sm btn-danger">删除</button>
                        </form>
<%--                        <a href="${pageContext.request.contextPath}/address/delete/${addr.id}"--%>
<%--                           class="btn btn-sm btn-danger"--%>
<%--                           onclick="return confirm('确定要删除该地址吗？')">删除</a>--%>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>
<!-- 编辑地址模态框 -->
<div class="modal fade" id="editAddressModal" tabindex="-1" aria-labelledby="editAddressLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="editAddressForm" method="post">
                <div class="modal-header">
                    <h5 class="modal-title" id="editAddressLabel">编辑地址</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- 隐藏的地址ID -->
                    <input type="hidden" id="editId" name="id">

                    <!-- 电话号码输入框 -->
                    <div class="mb-3">
                        <label for="editPhone" class="form-label">电话号码</label>
                        <input type="tel" class="form-control" id="editPhone" name="phone" required>
                    </div>

                    <!-- 地址输入框 -->
                    <div class="mb-3">
                        <label for="editAddress" class="form-label">地址</label>
                        <input type="text" class="form-control" id="editAddress" name="address" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">保存更改</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Bootstrap JS 和依赖 -->
<script src="${pageContext.request.contextPath}/static/js/jquery-3.7.1.min.js"></script>
<%--换绑电话号码弹窗--%>
<!-- jQuery -->
<script src="${pageContext.request.contextPath}/static/js/jquery-3.7.1.min.js"></script>
<!-- Bootstrap Bundle JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    function openEditModal(id, phone, address) {
        document.getElementById("editId").value = id;
        document.getElementById("editPhone").value = phone;
        document.getElementById("editAddress").value = address;

        var editModal = new bootstrap.Modal(document.getElementById("editAddressModal"));
        editModal.show();
    }

    // 设置表单提交地址
    document.addEventListener("DOMContentLoaded", function () {
        var form = document.getElementById("editAddressForm");
        if (form) {
            form.action = "${pageContext.request.contextPath}/address/update";
        }
    });
</script>
</body>
</html>
